<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>财务指标分析驾驶舱</title>
    <script src="../public//js/chart.js"></script>
    <script src="../public/js/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            color: #2c3e50;
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            text-align: center;
            color: #7f8c8d;
            font-size: 1.1em;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ecf0f1;
        }

        .card-title {
            font-size: 1.3em;
            font-weight: bold;
            color: #2c3e50;
        }

        .card-subtitle {
            font-size: 0.9em;
            color: #7f8c8d;
        }

        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            color: #27ae60;
            text-align: center;
            margin: 10px 0;
        }

        .metric-change {
            text-align: center;
            font-size: 1.1em;
            margin-bottom: 15px;
        }

        .positive {
            color: #27ae60;
        }

        .negative {
            color: #e74c3c;
        }

        .neutral {
            color: #f39c12;
        }

        .chart-container {
            height: 300px;
            margin-top: 15px;
        }

        .table-container {
            overflow-x: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .data-table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #2c3e50;
        }

        .data-table tr:hover {
            background-color: #f8f9fa;
        }

        .top-list {
            list-style: none;
            padding: 0;
        }

        .top-list li {
            padding: 10px;
            margin: 5px 0;
            background: #f8f9fa;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top-list .rank {
            font-weight: bold;
            color: #e74c3c;
            min-width: 30px;
        }

        .top-list .name {
            flex: 1;
            margin: 0 10px;
        }

        .top-list .value {
            font-weight: bold;
            color: #27ae60;
        }

        .analysis-text {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            border-left: 4px solid #3498db;
        }

        .analysis-text h4 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .analysis-text p {
            color: #555;
            line-height: 1.6;
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-good {
            background-color: #27ae60;
        }

        .status-warning {
            background-color: #f39c12;
        }

        .status-danger {
            background-color: #e74c3c;
        }

        @media (max-width: 768px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .metric-value {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面头部 -->
        <div class="header">
            <h1>📊 财务指标分析驾驶舱</h1>
            <p>实时监控企业财务状况，助力决策优化</p>
        </div>

        <!-- 一利五率指标分析 -->
        <div class="dashboard-grid">
            <!-- 利润总额 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">💰 利润总额</div>
                        <div class="card-subtitle">整体公司表现</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">¥ 85,000万</div>
                <div class="metric-change positive">📈 同比增长 12.5%</div>
                <div class="chart-container" id="profitChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>利润增长稳健，主要得益于A事业部表现突出，同比增长15%。建议继续优化B事业部运营效率，提升整体盈利能力。</p>
                </div>
            </div>

            <!-- 净资产收益率 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">📈 净资产收益率</div>
                        <div class="card-subtitle">ROE指标</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">18.5%</div>
                <div class="metric-change positive">📈 同比提升 2.1%</div>
                <div class="chart-container" id="roeChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>ROE表现良好，高于行业平均水平。建议对低效资产进行优化重组，进一步提升资本使用效率。</p>
                </div>
            </div>

            <!-- 资产负债率 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">⚖️ 资产负债率</div>
                        <div class="card-subtitle">财务杠杆风险</div>
                    </div>
                    <span class="status-indicator status-warning"></span>
                </div>
                <div class="metric-value">52.3%</div>
                <div class="metric-change negative">📉 同比上升 1.5%</div>
                <div class="chart-container" id="debtChart"></div>
                <div class="analysis-text">
                    <h4>⚠️ 风险提示</h4>
                    <p>资产负债率高于行业平均水平，B事业部达到58%，需谨慎控制新增债务，优化资本结构。</p>
                </div>
            </div>

            <!-- 营业收现率 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">💵 营业收现率</div>
                        <div class="card-subtitle">现金回收效率</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">12.5%</div>
                <div class="metric-change positive">📈 同比上升 1.2%</div>
                <div class="chart-container" id="cashChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>现金回收情况有所改善，但部分项目仍存在收款延迟问题，需加强客户信用评估和收款流程优化。</p>
                </div>
            </div>

            <!-- 全员劳动生产率 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">👥 全员劳动生产率</div>
                        <div class="card-subtitle">人均产值</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">58万/人</div>
                <div class="metric-change positive">📈 同比增长 4.5%</div>
                <div class="chart-container" id="productivityChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>E事业部表现突出，F事业部需改善人员配置和工作效率，建议推广E事业部的成功经验。</p>
                </div>
            </div>

            <!-- 研发经费投入强度 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">🔬 研发经费投入强度</div>
                        <div class="card-subtitle">创新投入</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">4.2%</div>
                <div class="metric-change positive">📈 同比增长 0.5%</div>
                <div class="chart-container" id="rdChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>G事业部研发投入突出，H子公司投入不足，建议增加研发投入以提升长期竞争力。</p>
                </div>
            </div>
        </div>

        <!-- 两金与EVA分析 -->
        <div class="dashboard-grid">
            <!-- 应收账款 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">📋 应收账款</div>
                        <div class="card-subtitle">资金占用情况</div>
                    </div>
                    <span class="status-indicator status-warning"></span>
                </div>
                <div class="metric-value">¥ 38,000万</div>
                <div class="metric-change negative">📉 同比增长 6%</div>
                <div class="chart-container" id="receivablesChart"></div>
                <div class="analysis-text">
                    <h4>⚠️ 风险提示</h4>
                    <p>客户A和B的应收账款占比较大，需重点关注其付款能力和信用状况，加强催款管理。</p>
                </div>
            </div>

            <!-- 存货 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">📦 存货</div>
                        <div class="card-subtitle">库存管理</div>
                    </div>
                    <span class="status-indicator status-warning"></span>
                </div>
                <div class="metric-value">¥ 25,000万</div>
                <div class="metric-change negative">📉 同比增长 4%</div>
                <div class="chart-container" id="inventoryChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>库存增长需优化库存结构，减少积压，提高资金周转效率。</p>
                </div>
            </div>

            <!-- EVA -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">💎 EVA经济增加值</div>
                        <div class="card-subtitle">资本使用效率</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">¥ 20,000万</div>
                <div class="metric-change positive">📈 同比增长 3%</div>
                <div class="chart-container" id="evaChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>K事业部EVA表现突出，L事业部有提升空间，建议加强成本控制和技术改进。</p>
                </div>
            </div>
        </div>

        <!-- 收入与成本结构分析 -->
        <div class="dashboard-grid">
            <!-- 收入分析 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">💰 收入结构分析</div>
                        <div class="card-subtitle">收入来源分布</div>
                    </div>
                    <span class="status-indicator status-good"></span>
                </div>
                <div class="metric-value">¥ 500,000万</div>
                <div class="metric-change positive">📈 同比增长 8%</div>
                <div class="chart-container" id="revenueChart"></div>
                <div class="analysis-text">
                    <h4>📋 分析要点</h4>
                    <p>A事业部收入增长显著，B事业部需探索新市场机会。建议拓展客户多元化，降低单一客户依赖风险。</p>
                </div>
            </div>

            <!-- 成本分析 -->
            <div class="card">
                <div class="card-header">
                    <div>
                        <div class="card-title">💸 成本结构分析</div>
                        <div class="card-subtitle">成本构成</div>
                    </div>
                    <span class="status-indicator status-warning"></span>
                </div>
                <div class="metric-value">¥ 400,000万</div>
                <div class="metric-change negative">📉 同比增长 7%</div>
                <div class="chart-container" id="costChart"></div>
                <div class="analysis-text">
                    <h4>⚠️ 成本控制</h4>
                    <p>直接材料费和人工费上涨明显，需寻找降低成本的方法，考虑多元化供应商以降低风险。</p>
                </div>
            </div>
        </div>

        <!-- 关键客户分析 -->
        <div class="card">
            <div class="card-header">
                <div class="card-title">👥 关键客户分析</div>
                <div class="card-subtitle">Top 5客户表现</div>
            </div>
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>客户名称</th>
                            <th>应收账款(万元)</th>
                            <th>收入贡献(万元)</th>
                            <th>同比增长率</th>
                            <th>风险等级</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>客户A</td>
                            <td>12,000</td>
                            <td>120,000</td>
                            <td class="positive">+10%</td>
                            <td><span class="status-indicator status-warning"></span>中等</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>客户B</td>
                            <td>9,000</td>
                            <td>95,000</td>
                            <td class="positive">+5%</td>
                            <td><span class="status-indicator status-warning"></span>中等</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>客户C</td>
                            <td>6,500</td>
                            <td>78,000</td>
                            <td class="positive">+12%</td>
                            <td><span class="status-indicator status-good"></span>低</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>客户D</td>
                            <td>5,200</td>
                            <td>65,000</td>
                            <td class="negative">-2%</td>
                            <td><span class="status-indicator status-danger"></span>高</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>客户E</td>
                            <td>4,800</td>
                            <td>58,000</td>
                            <td class="positive">+8%</td>
                            <td><span class="status-indicator status-good"></span>低</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 利润总额图表
            const profitCtx = document.createElement('canvas');
            document.getElementById('profitChart').appendChild(profitCtx);
            new Chart(profitCtx, {
                type: 'bar',
                data: {
                    labels: ['A事业部', 'B事业部', 'C事业部', 'D事业部'],
                    datasets: [{
                        label: '利润总额(万元)',
                        data: [25000, 18000, 22000, 20000],
                        backgroundColor: ['#3498db', '#e74c3c', '#2ecc71', '#f39c12']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 净资产收益率图表
            const roeCtx = document.createElement('canvas');
            document.getElementById('roeChart').appendChild(roeCtx);
            new Chart(roeCtx, {
                type: 'line',
                data: {
                    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
                    datasets: [{
                        label: 'ROE(%)',
                        data: [16.2, 17.1, 17.8, 18.5],
                        borderColor: '#27ae60',
                        backgroundColor: 'rgba(39, 174, 96, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 资产负债率图表
            const debtCtx = document.createElement('canvas');
            document.getElementById('debtChart').appendChild(debtCtx);
            new Chart(debtCtx, {
                type: 'doughnut',
                data: {
                    labels: ['A事业部', 'B事业部', 'C事业部', 'D事业部'],
                    datasets: [{
                        data: [45, 58, 52, 48],
                        backgroundColor: ['#3498db', '#e74c3c', '#2ecc71', '#f39c12']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 营业收现率图表
            const cashCtx = document.createElement('canvas');
            document.getElementById('cashChart').appendChild(cashCtx);
            new Chart(cashCtx, {
                type: 'bar',
                data: {
                    labels: ['整体公司', 'A事业部', 'B事业部', 'C事业部'],
                    datasets: [{
                        label: '营业收现率(%)',
                        data: [12.5, 15.2, 10.8, 13.1],
                        backgroundColor: ['#9b59b6', '#3498db', '#e74c3c', '#2ecc71']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 全员劳动生产率图表
            const productivityCtx = document.createElement('canvas');
            document.getElementById('productivityChart').appendChild(productivityCtx);
            new Chart(productivityCtx, {
                type: 'bar',
                data: {
                    labels: ['整体公司', 'E事业部', 'F事业部', 'G事业部'],
                    datasets: [{
                        label: '劳动生产率(万/人)',
                        data: [58, 62, 48, 55],
                        backgroundColor: ['#34495e', '#27ae60', '#e74c3c', '#f39c12']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 研发经费投入强度图表
            const rdCtx = document.createElement('canvas');
            document.getElementById('rdChart').appendChild(rdCtx);
            new Chart(rdCtx, {
                type: 'bar',
                data: {
                    labels: ['整体公司', 'G事业部', 'H子公司', 'I事业部'],
                    datasets: [{
                        label: '研发投入强度(%)',
                        data: [4.2, 6.5, 2.1, 3.8],
                        backgroundColor: ['#1abc9c', '#27ae60', '#e74c3c', '#f39c12']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 应收账款图表
            const receivablesCtx = document.createElement('canvas');
            document.getElementById('receivablesChart').appendChild(receivablesCtx);
            new Chart(receivablesCtx, {
                type: 'pie',
                data: {
                    labels: ['客户A', '客户B', '客户C', '其他客户'],
                    datasets: [{
                        data: [31.6, 23.7, 17.1, 27.6],
                        backgroundColor: ['#e74c3c', '#f39c12', '#3498db', '#95a5a6']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 存货图表
            const inventoryCtx = document.createElement('canvas');
            document.getElementById('inventoryChart').appendChild(inventoryCtx);
            new Chart(inventoryCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '存货(万元)',
                        data: [22000, 23500, 24800, 25200, 24800, 25000],
                        borderColor: '#e67e22',
                        backgroundColor: 'rgba(230, 126, 34, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // EVA图表
            const evaCtx = document.createElement('canvas');
            document.getElementById('evaChart').appendChild(evaCtx);
            new Chart(evaCtx, {
                type: 'bar',
                data: {
                    labels: ['整体公司', 'K事业部', 'L事业部', 'M事业部'],
                    datasets: [{
                        label: 'EVA(万元)',
                        data: [20000, 8000, 6000, 6000],
                        backgroundColor: ['#8e44ad', '#27ae60', '#3498db', '#f39c12']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 收入结构图表
            const revenueCtx = document.createElement('canvas');
            document.getElementById('revenueChart').appendChild(revenueCtx);
            new Chart(revenueCtx, {
                type: 'doughnut',
                data: {
                    labels: ['A事业部', 'B事业部', 'C事业部', 'D事业部', '其他'],
                    datasets: [{
                        data: [30, 20, 18, 15, 17],
                        backgroundColor: ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#95a5a6']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 成本结构图表
            const costCtx = document.createElement('canvas');
            document.getElementById('costChart').appendChild(costCtx);
            new Chart(costCtx, {
                type: 'pie',
                data: {
                    labels: ['直接材料费', '人工费', '制造费用', '管理费用', '销售费用'],
                    datasets: [{
                        data: [45, 25, 15, 10, 5],
                        backgroundColor: ['#e74c3c', '#f39c12', '#3498db', '#2ecc71', '#9b59b6']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });

        // 添加实时数据更新功能
        function updateMetrics() {
            // 这里可以添加实时数据更新的逻辑
            console.log('数据更新中...');
        }

        // 每5分钟更新一次数据
        setInterval(updateMetrics, 300000);
    </script>
</body>
</html> 